/**
 * 编程式导航
 */

import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'


class Login extends React.Component{
    handleLogin = () => {
        console.log('登录成功')
        // 想跳转成功页面 ？？
        this.props.history.push('/home')

    }

    render(){
        return (
            <div>
                输入用户名和密码后登录
                <button onClick={this.handleLogin}>登录</button>
            </div>
        )
    }
}

class Home extends React.Component{
    handleLogout = () => {
        console.log('登出')
        // 回到首页
        this.props.history.go(-2)

    }

    render(){
        return (
            <div>
                你已经登录成功，开心吧。
                <button onClick={this.handleLogout}>登出</button>
            </div>
        )
    }
}

// 默认路由组件
class Welcome extends React.Component{
    render(){
        return (
            <div>
                页面广告和说明，想看更多内容请登录<Link to="/login">点击这里到达登录页面</Link>
            </div>
        )
    }
}


class App extends React.Component{

    render() {
        return (
            <Router>
                <div>
                    {/* 下面的内容用默认路由匹配 */}
                    <Route exact path="/" component={Welcome} />
                    <Route path="/login" component={Login} />
                    <Route path="/home" component={Home} />
                </div>
            </Router>
        )
    }

}

export default App